<template>
    <z-paging>
        <u-sticky>
            <hedsty :headCentext="'进阶'"></hedsty>
        </u-sticky>
        <view class="dange_box" v-for="(item, index) in shopList" :key="index">
            <view class="left_box">
                <image :src="item.goods_image" mode="widthFix" />
            </view>
            <view class="right_box">
                <view class="title_box">{{ item.goods_name }}</view>
                <view class="zhongjianprc_box">
                    <view class="jiage_box">{{ item.price }}元素</view>
                    <view class="shuliang_box">剩余{{ item.num }}</view>
                </view>
                <view class="jinjie_anniu_box" @click="submit(item,index)">进阶</view>
            </view>
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            shopList: []
        }
    },
    onLoad() {

    },
    onShow() {
        this.getData()
    },
    methods: {
        getData() {
            this.$Request.get(this.$api.bonus.fusionPrizes).then(res => {
                if (res.code == 200) {
                    this.shopList = res.data.data
                }
            })
        },
        submit(item,index) {
            this.$router('/shopPage/advjinjie?item=' + JSON.stringify(item) + '&lzshop=' + true + '&index=' + index)
        }
    }
}
</script>
<style lang="scss" scoped>
.dange_box {
    width: 698rpx;
    height: 316rpx;
    margin: auto;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 48rpx 30rpx;
    background-image: url('https://morgan.dingxians.cn/upload/20241028/671f328acc766.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    position: relative;

    .left_box {
        width: 146rpx;
        height: 148rpx;
        background-image: url('https://morgan.dingxians.cn/static/fuyuri/16.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
            width: 100rpx;
        }
    }

    .right_box {
        width: 450rpx;
        font-family: Source Han Sans, Source Han Sans;
        padding-top: 20rpx;
        box-sizing: border-box;

        .title_box {
            width: 468rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            margin-bottom: 20rpx;
        }

        .zhongjianprc_box {
            width: 100%;
            height: 46rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;

            .jiage_box {
                height: 46rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                font-size: 32rpx;
                color: #FF8282;
                line-height: 46rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .shuliang_box {
                height: 34rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 34rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }


    }

    .jinjie_anniu_box {
        position: absolute;
        width: 140rpx;
        height: 50rpx;
        background-image: url('https://morgan.dingxians.cn/upload/20241028/671f328ab8cb9.png');
        background-size: 100% 100%;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 30rpx;
    }
}
</style>